<template>
	<view class="page-body">
		<view class="page-section">
			<map id="map1" class="mapstyle" ref="map1" style="width: 100%; height: 100%;" :markers="markers"
				:latitude="latitude" :longitude="longitude" :scale="mapScale" @markertap="markertap">
				<!-- 自定义气泡 -->
					<cover-view slot="callout">
					<!-- <cover-view class="callout"> -->
						
						<cover-view class="customCallout" :marker-id="1">
							----自定义布局---
							</cover-view>
						</cover-view>
						
					</cover-view>
				
				
			</map>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				latitude: 30.17489176432292,
				longitude: 120.2113267686632,
				markers: [{
					id: 1,
					latitude: 30.174892900,
					longitude: 120.2113275343,
					iconPath: '../../static/icon/make1.png', //显示的图标  
					width: 30,
					height: 30,
					stationName: '',
					distance: 10,
					customCallout: {
						anchorY: 0,
						anchorX: 0,
						display: 'ALWAYS',
					}
				}], // 地图上markers列表
				customCalloutMarkerIds: [1, 2, 3],
				mapScale: 16, // 地图默认放大倍数
			}
		},
		methods: {
			markertap(e) {
				const that = this
				let markers = this.markers
				markers.find(function(item, index) {
					if (item.id == e.markerId) {
						that.swiperCurrent = index // 点击marker 实现底部滑到相对应的站点
						item.customCallout.display = 'ALWAYS' // 点击marker 显示站点名
						item.width = 35
						item.height = 35
					} else {
						item.customCallout.display = 'NONE'
						item.width = 25
						item.height = 25
					}
				})
			}
		}
	}
</script>
<style lang="less" scoped>
	.page-body {
		width: 100%;
		height: 100%;
		position: absolute;
		overflow: hidden;

		.page-section {
			width: 100%;
			height: 100%;
			position: absolute;
		}

		.customCallout {
			width: 75%;
			box-sizing: border-box;
			border-radius: 4rpx;
			display: inline-flex;
			justify-content: center;
			align-items: center;
		}
	}

	.mapstyle {
		position: relative;
	}
</style>
